<template>
  <div class="jrTable">
    <div
      v-if="tableData.title"
      style="float:left;width:100%;text-align:center;font-size: 20px;font-weight:bold;margin-top:10px"
    >
      {{ tableData.title }}
    </div>
    <el-table
      :data="tableData.data"
      :height="tableData.tableHeight"
      :tooltip-effect="
        tableData.tooltipEffect ? tableData.tooltipEffect : 'dark'
      "
      :style="tableData.style ? tableData.style : 'width: 100%;'"
      :span-method="tableData.spanMethod ? objectSpanMethod : null"
      :default-sort="tableData.defaultSort"
      @selection-change="selectCheck"
      :max-height="tableData.maxWidth ? tableData.maxWidth : 715"
      :stripe="tableData.stripe"
      :show-summary="tableData.showSummary ? tableData.showSummary : false"
      :summary-method="sumTotal"
    >
      <template v-for="(item, index) in tableData.column">
        <el-table-column
          :prop="item.prop ? item.prop : null"
          :sortable="item.sortable ? item.sortable : false"
          :type="item.type ? item.type : null"
          :width="item.width ? item.width : ''"
          :align="item.align ? item.align : 'centre'"
          :label="item.label ? item.label : null"
          :hidden="item.hidden"
          :fixed="item.fixed ? item.fixed && $store.state.mobileFlex : null"
          :key="index"
          v-if="item.vIf != null ? item.vIf : true"
        >
          <template
            ><p v-if="item.fixedName">{{ $store.state.user }}</p></template
          >
          <template scope="scope" v-if="item.children">
            <el-image
              v-if="item1.type === 'elImage'"
              v-for="(item1, index1) in item.children"
              :style="item1.style"
              :src="scope.row.imageUrl"
              :key="index1"
              @click="tableClick(item1.click, scope.row)"
            >
            </el-image>
            <el-select
              v-if="item1.type === 'elSelect'"
              v-for="(item1, index1) in item.children"
              :key="index1"
              v-model="scope.row.uploadFileUrl"
              :placeholder="
                item.children.placeholder
                  ? item.children.placeholder
                  : '选择文件'
              "
              @change="queryFileList(scope.row.uploadFileUrl, scope.row)"
              :style="
                item.children.style ? item.children.style : 'width: 100%;'
              "
            >
              <el-option
                v-for="(item2, index2) in fileLists"
                :key="index2"
                :label="item2.fileName"
                :value="item2.urlName"
              ></el-option>
            </el-select>
            <el-tooltip
              v-if="item1.type === 'elTooltip'"
              v-for="(item1, index1) in item.children"
              class="item"
              :effect="item1.effect ? item1.effect : item.effect"
              :key="index1"
              :content="item1.content"
              :placement="item1.placement ? item1.placement : item.placement"
            >
              <el-upload
                class="avatar-uploader"
                v-if="item1.upload"
                action=""
                :http-request="handlePicture"
                multiple
                :file-list="fileList"
                :show-file-list="false"
                :auto-upload="true"
              >
                <el-button
                  :size="item1.size ? item1.size : 'mini'"
                  :type="item1.types ? item1.types : 'primary'"
                  :icon="item1.icon"
                  :style="item1.style"
                  :width="item1.width ? item1.width : '40px'"
                  v-if="item1.vIf != null ? item1.vIf : true"
                  @click="tableClick(item1.click, scope.row)"
                >
                </el-button>
              </el-upload>
              <!--              :disabled="item1.show != null ? (scope.row[item1.show.name] == item1.show.condition ? false : true) : false"-->
              <!--              v-show="item1.show != null ? (scope.row[item1.show.name] == item1.show.condition ? true : false) : true"-->
              <template v-else>
                <el-button
                  :size="item1.size ? item1.size : 'mini'"
                  :type="item1.types ? item1.types : 'primary'"
                  :icon="item1.icon"
                  :disabled="
                    item1.show ? tableButtonShow(item1.show, scope.row) : false
                  "
                  v-if="item1.vIf != null ? item1.vIf : true"
                  :style="item1.style"
                  @click="tableClick(item1.click, scope.row)"
                >
                </el-button>
              </template>
            </el-tooltip>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-dialog
      title="预览"
      :visible.sync="iframeShow"
      width="70%"
      height="100%"
    >
      <iframe :src="iframeUrl" style="width:90%;height:66vh"></iframe>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "jrTable",
  data() {
    return {
      fileList: [],
      fileLists: [],
      buttonShow: true,
      spanArr: [],
      iframeShow: false,
      fileUrlBoolean: false,
      iframeUrl: null,
    };
  },
  props: {
    tableData: {
      type: Object,
      default: () => {},
    },
    setting: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    tableButtonShow() {
      return function(show, data) {
        if (show.constructor == Array) {
          for (let j = 0; j < show.length; j++) {
            if (!show[j].flag) {
              show[j].flag = "and";
            }
          }
          let flagOr = this.booleanDeal(show, data);
          show = show.filter((x) => {
            return x.flag === "and";
          });
          let boolean = false;
          for (let i = 0; i < show.length; i++) {
            if (
              show[i] != null
                ? data[show[i].name] == show[i].condition
                  ? false
                  : true
                : false
            ) {
              boolean = true;
            }
          }
          if (boolean || flagOr) {
            return true;
          } else {
            return false;
          }
        } else {
          return show != null
            ? data[show.name] == show.condition
              ? false
              : true
            : false;
        }
      };
    },
  },
  watch: {
    tableData: {
      handler: function() {
        if (this.tableData.showSummary) {
          this.$nextTick(() => {
            // 改变合计行样式
            const s_table = document.getElementsByClassName(
              "el-table__footer-wrapper"
            )[0];
            const child_tr = s_table.getElementsByTagName("tr")[0];
            child_tr.childNodes.forEach((item) => {
              item.setAttribute("style", "color : red;font-weight: 1000");
            });
          });
        }
      },
      immediate: true,
      deep: true,
    },
    setting: {
      handler: function() {
        let str;
        if (this.setting) {
          let data = this.tableData.column;
          for (let i = 0; i < data.length; i++) {
            if (data[i].if) {
              if (data[i].if[0] === "!") {
                str = data[i].if.substr(1);
                data[i].vIf = !this.setting[str];
              } else {
                data[i].vIf = this.setting[data[i].if];
              }
            }
            if (i == data.length - 1) {
              for (let j = 0; j < data[i].children.length; j++) {
                if (data[i].children[j].if !== undefined) {
                  if (data[i].children[j].if[0] === "!") {
                    str = data[i].children[j].if.substr(1);
                    data[i].children[j].vIf = !this.setting[str];
                  } else {
                    data[i].children[j].vIf = this.setting[
                      data[i].children[j].if
                    ];
                  }
                }
              }
            }
          }
        }
      },
      immediate: true,
      deep: true,
    },
    "tableData.data": function() {
      if (this.tableData.spanMethod) {
        this.spanArr = [];
        this.getSpanArr(this.tableData.data);
      }
      if (this.fileUrlBoolean) {
        for (let i = 0; i < this.tableData.data.length; i++) {
          this.tableData.data[i].uploadFileUrl = "";
          // this.tableData.data[i].fileList = [];
        }
      }
    },
  },
  created() {
    this.selectFlag();
    console.log(window.localStorage.href);
  },
  methods: {
    handlePicture(params) {
      this.$emit("handlePicture", params);
    },
    tableClick(name, row) {
      this.$emit(name, row);
    },
    queryFileList(fileUrl, row) {
      this.iframeShow = true;
      this.iframeUrl = fileUrl;
      row.uploadFileUrl = "";
    },
    selectFlag() {
      if (
        this.tableData.column
          .filter((x) => {
            return x.children;
          })
          .filter((x) => {
            return x.children[0].type == "elSelect";
          }).length > 0
      ) {
        this.fileUrlBoolean = true;
      } else {
        this.fileUrlBoolean = false;
      }
    },
    setSelectFiles(row, res) {
      row.uploadFileUrl = "";
      this.fileLists = res.data;
    },
    selectCheck(params) {
      this.$emit("selectCheck", params);
    },
    booleanDeal(show, data) {
      show = show.filter((x) => {
        return x.flag == "or";
      });
      let boolean = true;
      for (let i = 0; i < show.length; i++) {
        if (
          show[i] != null
            ? data[show[i].name] == show[i].condition
              ? true
              : false
            : true
        ) {
          return (boolean = false);
        }
      }
      return boolean;
    },
    getSpanArr(data) {
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          if (
            data[i][this.tableData.spanMethod.root] ===
            data[i - 1][this.tableData.spanMethod.root]
          ) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    //合并表格
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (this.tableData.spanMethod.spanList.includes(columnIndex)) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

    //合计总价
    sumTotal(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (column.property == "total") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return this.$utils.jsTotalDeal(prev, curr);
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
      });
      return sums;
    },
    summaryMethod(params) {
      this.$emit("summaryMethod", params);
    },
  },
};
</script>

<style type="text/css" scoped>
.avatar-uploader {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

.jrTable >>> .el-button--mini {
  margin-left: 5px;
  margin-top: 5px;
}

.jrTable >>> .avatar-uploader {
  margin-left: 0px;
  margin-right: 0px;
}

.jrTable >>> .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: lightblue !important;
}
</style>
